In-browser editors have become highly popular as ways to author online documents, emails, and edit websites. Typically, these editors work using a widely used in-browser technology known as “contentEditable.” The contentEditable attribute can be enabled by a developer on any HTML element on a page to gain access to the basic functionality of blinking cursor/text caret for manipulation of the contents of that element. To access the manipulations made by the end-user, a developer can then call upon the “innerHTML” property of the element.
Web browsers natively parse and construct a data structure called a “document object model” (Browser DOM). Calling innerHTML converts this data structure back to text.
The use of contentEditable and innerHTML is inherently unreliable and is only suited for basic rich text manipulation. When using this technique, the integrity of the original source code is easily lost. For instance, invalid markup, formatting whitespace, and capitalization of tag names and attributes is lost because the Browser DOM does not contain such information.
In addition, there are significant changes between the implementations of contentEditable and innerHTML between different browsers. Further, reliance on contentEditable, creates a dependence on the browser's native implementation of handling selection which also differs between browsers and is easily lost (for instance, if a user clicks outside of the editor). There is therefore a need in the art for a system and method that maintains the integrity of the original source code when mark-up language is being edited across different browser platforms.